import ORYX_Config from '../CONFIG'
import ORYX_Utils from '../Utils'

import ORYX_Node from '../core/Node'

/**
 * Supports EPCs by offering a syntax check and export and import ability..
 *
 *
 */
export default class ProcessLink {
  /**
   * Offers the plugin functionality:
   *
   */
  constructor (facade) {
    this.facade = facade
    this.facade.registerOnEvent(ORYX_Config.EVENT_PROPERTY_CHANGED, this.propertyChanged.bind(this))
  }


  /**
   *
   * @param {Object} option
   */
  propertyChanged (option, node) {
    if (option.name !== 'oryx-refuri' || !node instanceof ORYX_Node) {
      return
    }

    if (option.value && option.value.length > 0 && option.value != 'undefined') {
      this.show(node, option.value)
    } else {
      this.hide(node)
    }
  }

  /**
   * Shows the Link for a particular shape with a specific url
   *
   * @param {Object} shape
   * @param {Object} url
   */
  show (shape, url) {
    // Generate the svg-representation of a link
    let link = ORYX_Utils.graft('http://www.w3.org/2000/svg', null,
      ['a',
        { 'target': '_blank' },
        ['path',
          {
            'stroke-width': 1.0,
            'stroke': '#00DD00',
            'fill': '#00AA00',
            'd': 'M3,3 l0,-2.5 l7.5,0 l0,-2.5 l7.5,4.5 l-7.5,3.5 l0,-2.5 l-8,0',
            'line-captions': 'round'
          }
        ]
      ])

    link = ORYX_Utils.graft('http://www.w3.org/2000/svg', null,
      ['a',
        { 'target': '_blank' },
        ['path', {
          'style': 'fill:#92BFFC;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.72',
          'd': 'M0 1.44 L0 15.05 L11.91 15.05 L11.91 5.98 L7.37 1.44 L0 1.44 Z'
        }],
        ['path', {
          'style': 'stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.72;fill:none;',
          'transform': 'translate(7.5, -8.5)',
          'd': 'M0 10.51 L0 15.05 L4.54 15.05'
        }],
        ['path', {
          'style': 'fill:#f28226;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.72',
          'transform': 'translate(-3, -1)',
          'd': 'M0 8.81 L0 13.06 L5.95 13.06 L5.95 15.05 A50.2313 50.2313 -175.57 0 0 10.77 11.08 A49.9128 49.9128 -1.28 0 0 5.95 6.54 L5.95 8.81 L0 8.81 Z'
        }]
      ])

    /*
     *
     * 					[ 'a',
     {'target': '_blank'},
     ['path', { "style": "fill:none;stroke-width:0.5px; stroke:#000000", "d": "M7,4 l0,2"}],
     ['path', { "style": "fill:none;stroke-width:0.5px; stroke:#000000", "d": "M4,8 l-2,0 l0,6"}],
     ['path', { "style": "fill:none;stroke-width:0.5px; stroke:#000000", "d": "M10,8 l2,0 l0,6"}],
     ['rect', { "style": "fill:#96ff96;stroke:#000000;stroke-width:1", "width": 6, "height": 4, "x": 4, "y": 0}],
     ['rect', { "style": "fill:#ffafff;stroke:#000000;stroke-width:1", "width": 6, "height": 4, "x": 4, "y": 6}],
     ['rect', { "style": "fill:#96ff96;stroke:#000000;stroke-width:1", "width": 6, "height": 4, "x": 0, "y": 12}],
     ['rect', { "style": "fill:#96ff96;stroke:#000000;stroke-width:1", "width": 6, "height": 4, "x": 8, "y": 12}],
     ['rect', { "style": "fill:none;stroke:none;pointer-events:all", "width": 14, "height": 16, "x": 0, "y": 0}]
     ]);
     */

    // Set the link with the special namespace
    link.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', url)


    // Shows the link in the overlay
    this.facade.raiseEvent({
      type: ORYX_Config.EVENT_OVERLAY_SHOW,
      id: 'arissupport.urlref_' + shape.id,
      shapes: [shape],
      node: link,
      nodePosition: 'SE'
    })

  }

  /**
   * Hides the Link for a particular shape
   *
   * @param {Object} shape
   */
  hide (shape) {

    this.facade.raiseEvent({
      type: ORYX_Config.EVENT_OVERLAY_HIDE,
      id: 'arissupport.urlref_' + shape.id
    })

  }
}
